<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>垂直循环滚动动画</title>
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<section class="container">
		<div class="item-group" style="--delay:-1">
			<div class="item-box">
				<div class="img">
					<img src="./img/A1.jpeg" alt="">
				</div>
				<div class="desc">
					<span class="name">张良 (第1名)</span>
					<p class="lines">君子不立危墙之下</p>
				</div>
			</div>
			<div class="follow-btn" >关注</div>
		</div>

		<div class="item-group" style="--delay:0">
			<div class="item-box">
				<div class="img">
					<img src="./img/A2.jpeg" alt="">
				</div>
				<div class="desc">
					<span class="name">焰灵姬 (第2名)</span>
					<p class="lines">我的美，你遥不可及</p>
				</div>
			</div>
			<div class="del-follow-btn" >取消</div>
		</div>

		<div class="item-group" style="--delay:1">
			<div class="item-box">
				<div class="img">
					<img src="./img/A3.jpeg" alt="">
				</div>
				<div class="desc">
					<span class="name">韩飞 (第3名)</span>
					<p class="lines">聚散流沙</p>
				</div>
			</div>
			<div class="follow-btn" >关注</div>
		</div>

		<div class="item-group" style="--delay:2">
			<div class="item-box">
				<div class="img">
					<img src="./img/A4.jpeg" alt="">
				</div>
				<div class="desc">
					<span class="name">赤练 (第4名)</span>
					<p class="lines">你感到绝望吗</p>
				</div>
			</div>
			<div class="del-follow-btn" >取消</div>
		</div>

		<div class="item-group" style="--delay:2">
			<div class="item-box">
				<div class="img">
					<img src="./img/A5.jpeg" alt="">
				</div>
				<div class="desc">
					<span class="name">卫庄 (第5名)</span>
					<p class="lines">鲨齿从不挑食</p>
				</div>
			</div>
			<div class="follow-btn" >取消</div>
		</div>
	</section>
</body>

</html>

<script src="./js/index.js"></script>